let openID;
let user;
let locations;
let currLocationMeetingRooms;
let currSelectedLocationID;

let currViewMeetingRoomBooking;
let currDateMeetingRoomOccupancy;//16 array

let universal_currSelectedMeetingRoomID;
let state_1_1_currSelectedMeetingRoomID;

let state2_selectedDate = null;
let state2_selectedTime_1 = null;
let state2_selectedTime_2 = null;

let universal_currState = 0;

let states; //分别对应状态1，状态1-1，状态2

//正则表达式获取地址栏?后的指定name参数
function universal_getParameterString(name) {
    let result = null;
    let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
    let r = window.location.search.substr(1).match(reg);
    if (r != null) {
        result = unescape(r[2]);
    }
    return result;
}

function universal_redirectToManagement() {
    window.location.href = "/booking/toManagement?openid=" + openID;
}

function universal_redirectToMeetingRoom() {
    /*
    $.ajax({
        type: 'GET',
        data: {"openid": openID},
        //contentType:'',
        url: '/booking/toMeetingRoom',
        success: function (data) {
            console.log(data + 'send successfully');
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            //状态码
            console.log(XMLHttpRequest.status);
            // 状态
            console.log(XMLHttpRequest.readyState);
            // 错误信息
            console.log(textStatus);
        }
    });

     */
    window.location.href = "/booking/toMeetingRoom?openid=" + openID;
}

function universal_init() {
    states = new Array(3);
    openID = universal_getParameterString("openid");
    universal_currSelectedMeetingRoomID = universal_getParameterString("meetingRoomID");
    $.ajax({
        url: "/booking/greeting",
        data: {"openid": openID},
        method: "get",
        async: false,
        contentType: "application/json",
        success: function (data) {
            console.log(data);
            user = data;
        },
        error: function (err) {
            console.log(err)
        }
    });
    if (universal_currSelectedMeetingRoomID != null) {
        let informationPage = document.getElementById("information-page");
        informationPage.innerHTML = states[2];
        state2_init();
    } else {
        state1_init();
    }
    $(document).on("click", "#previous-step", function () {
        if (universal_currState === 0) {
            console.log("老子恨课设")
        } else {
            state1_init();
        }
    })
    $(document).on("click", "#next-step", function () {
        if (universal_currState === 2) {
            state2_bookingSubmit();
        } else {
            state2_init();
        }
    })
}

function state1_getAllLocation() {
    $.ajax({
        url: "/booking/getAllLocation",
        method: "get",
        async: false,
        contentType: "application/json",
        success: function (data) {
            //data = JSON.parse(data);
            locations = [];
            for (let index in data) {
                locations.push(data[parseInt(index)].location);
            }
        },
        error: function (err) {
            console.log(err)
        }
    });
    return locations;
}

function state1_getAllMeetingRoomByLocation(locationID) {
    $.ajax({
        url: "/booking/getAllMeetingRoomByLocation",
        method: "get",
        async: false,
        data: {"location": locations[locationID]},
        contentType: "application/json",
        success: function (data) {
            //data = JSON.parse(data);
            currLocationMeetingRooms = [];
            for (let index in data) {
                currLocationMeetingRooms.push(data[parseInt(index)]);
            }

        },
        error: function (err) {
            console.log(err)
        }
    });
    return currLocationMeetingRooms;
}

function state1_1_getAllMeetingOccupancyByMeetingRoomID(id) {
    $.ajax({
        url: "/booking/getAllMeetingOccupancyByMeetingRoomID",
        method: "get",
        async: false,
        data: {"meetingRoomID": id},
        contentType: "application/json",
        success: function (data) {
            currViewMeetingRoomBooking = data;
        },
        error: function (err) {
            console.log(err)
        }
    });
    return currViewMeetingRoomBooking;
}

function state1_refreshLocation() {
    locations = state1_getAllLocation();
    currSelectedLocationID = locations[0];
    let locationIndicator = document.getElementById("location-indicator");
    let resultHTML = "";
    for (let index in locations) {
        resultHTML += "<button type=\"button\" class=\"btn btn-secondary btn-list-set\" id=\"location_" + index + "\">" + locations[parseInt(index)] + "</button>\n";
    }
    locationIndicator.innerHTML = resultHTML;
    $(document).ready(function () {
        for (let index in locations) {
            $(document).on("click", "#location_" + index, function () {
                state1_setSelectedLocation("location_" + index);
            })
        }
    })
}

function state1_refreshMeetingRoomInformationByLocationID(LocationID) {
    currLocationMeetingRooms = state1_getAllMeetingRoomByLocation(LocationID);
    let meetingRoomContainer = document.getElementById("meeting-room-container");
    let resultHTML = "";
    for (let index in currLocationMeetingRooms) {
        resultHTML +=
            "                        <div class=\"row detail-bottom\" id=\"meetingRoom_" + currLocationMeetingRooms[parseInt(index)]["id"] + "\">\n" +
            "                            <div class=\"right-cont1\">\n" +
            "                                " + currLocationMeetingRooms[parseInt(index)]["name"] + "\n" +
            "                            </div>\n" +
            "                            <div class=\"right-cont2\">\n" +
            "                                <div>\n" +
            "                                    " + currLocationMeetingRooms[parseInt(index)]["main_use"] + "\n" +
            "                                </div>\n" +
            "                                <div>\n" +
            "                                    <div class=\"right-display-inline\">\n" +
            "                                        容纳人数:\n" +
            "                                    </div>\n" +
            "                                    <div class=\"right-display-inline\">\n" +
            "                                        " + currLocationMeetingRooms[parseInt(index)]["capacity"] + "\n" +
            "                                    </div>\n" +
            "                                </div>\n" +
            "                            </div>\n" +
            "                            <div class=\"right-cont3\">\n" +
            "                                <button type=\"button\" class=\"btn-primary right-btn\" id=\"meetingRoom_selected_" + currLocationMeetingRooms[parseInt(index)]["id"] + "\">选定</button>\n" +
            "                            </div>\n" +
            "                            <div class=\"right-cont4\">\n" +
            "                                <button type=\"button\" class=\"btn-primary right-btn\" id=\"meetingRoom_viewOccupancy_" + currLocationMeetingRooms[parseInt(index)]["id"] + "\">查看</button>\n" +
            "                            </div>\n" +
            "                        </div>\n"
    }
    meetingRoomContainer.innerHTML = resultHTML;
    $(document).ready(function () {
        for (let index in currLocationMeetingRooms) {
            $(document).on("click", "#meetingRoom_selected_" + currLocationMeetingRooms[parseInt(index)]["id"], function () {
                universal_currSelectedMeetingRoomID = currLocationMeetingRooms[parseInt(index)]["id"];
            })
            $(document).on("click", "#meetingRoom_viewOccupancy_" + currLocationMeetingRooms[parseInt(index)]["id"], function () {
                state1_1_init("meetingRoom_" + currLocationMeetingRooms[parseInt(index)]["id"]);
            })
        }
    })
}

function universal_refreshState(fromStateNum, toStateNum) {
    let informationPage = document.getElementById("information-page");
    universal_currState = toStateNum;
    states[fromStateNum] = informationPage.innerHTML;
    informationPage.innerHTML = states[toStateNum];
}

function state1_1_refreshVisualizationOfOccupancyByMeetingRoomID(meetingRoomID) {
    for (let i = 0; i < 5; i++) {
        for (let j = 0; j < 16; j++) {
            $("#date_" + i + "_" + j).removeClass("table-btn-selected");
            $("#date_" + i + "_" + j).addClass("table-btn-noselect");
        }
    }

    currViewMeetingRoomBooking = state1_1_getAllMeetingOccupancyByMeetingRoomID(meetingRoomID);
    let date = new Date();
    for (let index = 0; index < 5; index++) {
        document.getElementById("date_" + index).innerText = (date.getMonth() + 1) + "-" + (date.getDate() + index);//todo: 跨月错误
    }

    for (let index in currViewMeetingRoomBooking) {
        let time = JSON.parse(currViewMeetingRoomBooking[parseInt(index)]["time_occupied"]);
        for (let i = parseInt(time["beginTime"].split(": ")[0]) - 8; i < parseInt(time["endTime"].split(": ")[0]) - 8; i++) {
            $("#date_" + (parseInt(time["date"].split("-")[2]) - date.getDate()) + "_" + i).addClass("table-btn-selected");
            $("#date_" + (parseInt(time["date"].split("-")[2]) - date.getDate()) + "_" + i).removeClass("table-btn-noselect");
        }

    }
}

function state1_1_refreshMeetingRoom(meetingRoomID) {
    let locationIndicator = document.getElementById("current-Location-Meeting-Room");
    let resultHTML = "";
    for (let index in currLocationMeetingRooms) {
        let temp = currLocationMeetingRooms[parseInt(index)]["id"];
        resultHTML += "<button type=\"button\" class=\"btn btn-secondary btn-list-set\" id=\"meetingRoom_" + temp + "\">" + currLocationMeetingRooms[parseInt(index)]["name"] + "</button>\n";
    }
    locationIndicator.innerHTML = resultHTML;
    $(document).ready(function () {
        for (let index in currLocationMeetingRooms) {
            $(document).on("click", "#meetingRoom_" + currLocationMeetingRooms[parseInt(index)]["id"], function () {
                state1_1_setSelectedMeetingRoom("meetingRoom_" + currLocationMeetingRooms[parseInt(index)]["id"]);
            })
        }
    })
}


function state2_refreshVisualizationOfOccupancyByMeetingRoomIDAndDate(meetingRoomID, date, HTML_dateID) {
    for(let i = 0; i<16; i++)
    {
        $("#date_0_" + i).removeClass("table-btn-selected");
        $("#date_0_" + i).addClass("table-btn-noselect");
    }

    currViewMeetingRoomBooking = state1_1_getAllMeetingOccupancyByMeetingRoomID(meetingRoomID);
    document.getElementById("date_0").innerText = date.split("-")[1] + "-" + date.split("-")[2];
    for (let index in currViewMeetingRoomBooking) {
        let time = JSON.parse(currViewMeetingRoomBooking[parseInt(index)]["time_occupied"]);
        if (time["date"] == date) {
            for (let i = parseInt(time["beginTime"].split(": ")[0]) - 8; i < parseInt(time["endTime"].split(": ")[0]) - 8; i++) {
                {
                    $("#date_0" + "_" + i).addClass("table-btn-selected");
                    $("#date_0" + "_" + i).removeClass("table-btn-noselect");
                    currDateMeetingRoomOccupancy[i] = 1;
                }
            }
        }
    }
}


function state1_init() {
    universal_refreshState(universal_currState, 0);
    $(document).ready(function () {
        state1_refreshLocation();
        currSelectedLocationID = 0;
        state1_setSelectedLocation("location_0");
        universal_currSelectedMeetingRoomID = null;
        $("#previous-step").removeClass("btn-primary button-shadow");
        $("#previous-step").addClass("button-off");
        document.getElementById("header").innerText = "会议室预约 1、选择会议室"
    })
}

function state1_1_init(HTML_meetingRoomID) {
    universal_refreshState(universal_currState, 1);
    $(document).ready(function () {
        state_1_1_currSelectedMeetingRoomID = HTML_meetingRoomID.split("_")[1];
        //currViewMeetingRoomBooking = new Array(5).fill(new Array(16).fill(0));
        state1_1_refreshMeetingRoom(state_1_1_currSelectedMeetingRoomID);
        state1_1_setSelectedMeetingRoom(HTML_meetingRoomID);
        $("#previous-step").addClass("btn-primary button-shadow");
        $("#previous-step").removeClass("button-off");
        document.getElementById("header").innerText = "会议室预约 1、选择会议室"
    })
}

function state2_init() {
    if (universal_currSelectedMeetingRoomID == null) {
        alert("请先选择一个会议室");
    } else {
        universal_refreshState(universal_currState, 2);
        $(document).ready(function () {
            let date = new Date();
            currDateMeetingRoomOccupancy = new Array(16).fill(0);
            state2_dateChanger("" + date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate());
            document.getElementById("header").innerText = "会议室预约 2、填写个人信息"

            $("#previous-step").addClass("btn-primary button-shadow");
            $("#previous-step").removeClass("button-off");
            $("#next-step").innerText = "提交"

            for (let i = 0; i < 16; i++) {
                $(document).on("click", "#date_0_" + i, function () {
                    state2_checkOccupancy("#date_0_" + i);
                });
            }

            document.getElementById("Date").innerHTML = "<option selected value=\"" + ("" + date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()) + "\">"
                + (date.getMonth() + 1) + "-" + (date.getDate()) + "</option>";
            for (let i = 1; i < 5; i++) {
                document.getElementById("Date").innerHTML +=
                    "<option value=\"" + ("" + date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate() + i)) + "\">" + (date.getMonth() + 1) + "-" + (date.getDate() + i) + "</option>"
            }
        })
    }
}


//todo: 视觉修正
function state2_checkOccupancy(HTML_timeID) {
    let result = false;
    if (state2_selectedTime_1 == null) {
        state2_selectedTime_1 = parseInt(HTML_timeID.split("_")[2]) + 8;
        if (currDateMeetingRoomOccupancy[state2_selectedTime_1 - 8] === 1) {
            state2_selectedTime_1 = null;
        } else {
            $(HTML_timeID).removeClass("table-btn-noselect");
            $(HTML_timeID).addClass("table-btn-select");
        }
    } else {
        state2_selectedTime_2 = parseInt(HTML_timeID.split("_")[2]) + 8;
        if (currDateMeetingRoomOccupancy[state2_selectedTime_2 - 8] === 1) {
            state2_selectedTime_2 = null;
        } else {
            $(HTML_timeID).removeClass("table-btn-noselect");
            $(HTML_timeID).addClass("table-btn-select");
        }
        if (state2_selectedTime_1 > state2_selectedTime_2) {
            let temp = state2_selectedTime_2;
            state2_selectedTime_2 = state2_selectedTime_1;
            state2_selectedTime_1 = temp;
        }
        state2_selectedTime_2 += 1;
        for(let i = state2_selectedTime_1 - 8; i < state2_selectedTime_2 - 8; i++)
        {
            $("#date_0_" + i).addClass("table-btn-select");
            $("#date_0_" + i).removeClass("table-btn-noselect");
        }
        let bookingTime = {
            "date": state2_selectedDate,
            "beginTime": state2_selectedTime_1 + ": 00",
            "endTime": state2_selectedTime_2 + ": 00"
        };
        $.ajax({
            url: "/booking/checkOccupancy",
            method: "post",
            async: false,
            data: JSON.stringify({"id": universal_currSelectedMeetingRoomID, "time": bookingTime}),
            contentType: "text/plain",
            success: function (data) {
                result = data;
            },
            error: function (err) {
                console.log(err)
            }
        });
        if (result === false) {
            for(let i = state2_selectedTime_1; i < state2_selectedTime_2; i++)
            {
                $("#date_0_" + i).addClass("table-btn-select");
                $("#date_0_" + i).removeClass("table-btn-noselect");
            }
            state2_selectedTime_1 = null;
            state2_selectedTime_2 = null;
        }
    }
}

function state2_dateChanger(toDate) {

    state2_selectedDate = toDate == null ? document.getElementById("Date").value : toDate;
    state2_refreshVisualizationOfOccupancyByMeetingRoomIDAndDate(universal_currSelectedMeetingRoomID, state2_selectedDate);
    state2_selectedTime_1 = null;
    state2_selectedTime_2 = null;
}

//完成提交，全部非空
function state2_bookingSubmit() {
    let real_name = document.getElementById("real_name").value;
    let contact = document.getElementById("contact").value;
    let Date = document.getElementById("Date").value;
    let Time = JSON.stringify({
        "date": state2_selectedDate,
        "beginTime": state2_selectedTime_1 + ": 00",
        "endTime": state2_selectedTime_2 + ": 00"
    });
    let purpose = document.getElementById("purpose").value;
    let participants = document.getElementById("participants").value;
    let comment = document.getElementById("comment").value;

    let result =
        {
            "meeting_room_id": universal_currSelectedMeetingRoomID,
            "user_id": user["id"],
            "purpose": purpose,
            "participants": parseInt(participants),
            "time_occupied": Time,
            "contact": contact,
            "status": 1,
            "comment": comment,
            "reply": "",
            "real_name": real_name,
        }

    $.ajax({
        url: "/booking/submitBooking",
        method: "post",
        async: false,
        data: JSON.stringify(result),
        contentType: "text/plain",
        success: function (data) {
            window.location.href = "/booking/toBooking?openid=" + openID;
        },
        error: function (err) {
            console.log(err)
        }
    });
}

function state1_setSelectedLocation(HTML_locationID) {
    currSelectedLocationID = HTML_locationID.split('_')[1];
    state1_refreshMeetingRoomInformationByLocationID(currSelectedLocationID);
}

function state1_setSelectedMeetingRoom(HTML_meetingRoomID) {
    universal_currSelectedMeetingRoomID = HTML_meetingRoomID.split("_")[1];
    //state1_refreshMeetingRoomInformationByLocationID(universal_currSelectedMeetingRoomID);
}

function state1_1_setSelectedMeetingRoom(HTML_meetingRoomID) {
    state_1_1_currSelectedMeetingRoomID = HTML_meetingRoomID.split("_")[1];
    state1_1_refreshVisualizationOfOccupancyByMeetingRoomID(state_1_1_currSelectedMeetingRoomID);
}

$(document).ready(function () {
    universal_init();
    states[1] =
        "<link rel=\"stylesheet\" href=\"../css/bookingstate1-1.css\">" +
        "<div style=\"margin-top: 15px\">\n" +
        "        <div class=\"container\">\n" +
        "            <div class=\"left\">\n" +
        "                <div class=\"btn-group-vertical btn-list\" role=\"group\" aria-label=\"Basic example\" id=\"current-Location-Meeting-Room\">\n" +
        "                    <button type=\"button\" class=\"btn btn-secondary btn-list-set\">会议室101</button>\n" +
        "                    <button type=\"button\" class=\"btn btn-secondary btn-list-set\">会议室101</button>\n" +
        "                    <button type=\"button\" class=\"btn btn-secondary btn-list-set\">会议室101</button>\n" +
        "                    <button type=\"button\" class=\"btn btn-secondary btn-list-set\">会议室101</button>\n" +
        "                </div>\n" +
        "            </div>\n" +
        "            <div class=\"right\">\n" +
        "                <div class=\"container all-background\">\n" +
        "                    <div class=\"row table-shadow\">\n" +
        "                        <table class=\"table-sty\">\n" +
        "                            <thead>\n" +
        "                            <tr>\n" +
        "                                <th id=\"date_0\">2月20日</th>\n" +
        "                                <th id=\"date_1\">2月21日</th>\n" +
        "                                <th id=\"date_2\">2月22日</th>\n" +
        "                                <th id=\"date_3\">2月22日</th>\n" +
        "                                <th id=\"date_4\">2月23日</th>\n" +
        "                            </tr>\n" +
        "                            </thead>\n" +
        "                            <tr>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_0_0\">8:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_1_0\">8:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_2_0\">8:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_3_0\">8:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_4_0\">8:00</button></td>\n" +
        "                            </tr>\n" +
        "                            <tr>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_0_1\">9:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_1_1\">9:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_2_1\">9:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_3_1\">9:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_4_1\">9:00</button></td>\n" +
        "                            </tr>\n" +
        "                            <tr>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_0_2\">10:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_1_2\">10:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_2_2\">10:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_3_2\">10:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_4_2\">10:00</button></td>\n" +
        "                            </tr>\n" +
        "                            <tr>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_0_3\">11:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_1_3\">11:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_2_3\">11:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_3_3\">11:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_4_3\">11:00</button></td>\n" +
        "                            </tr>\n" +
        "                            <tr>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_0_4\">12:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_1_4\">12:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_2_4\">12:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_3_4\">12:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_4_4\">12:00</button></td>\n" +
        "                            </tr>\n" +
        "                            <tr>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_0_5\">13:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_1_5\">13:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_2_5\">13:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_3_5\">13:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_4_5\">13:00</button></td>\n" +
        "                            </tr>\n" +
        "                            <tr>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_0_6\">14:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_1_6\">14:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_2_6\">14:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_3_6\">14:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_4_6\">14:00</button></td>\n" +
        "                            </tr>\n" +
        "                            <tr>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_0_7\">15:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_1_7\">15:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_2_7\">15:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_3_7\">15:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_4_7\">15:00</button></td>\n" +
        "                            </tr>\n" +
        "                            <tr>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_0_8\">16:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_1_8\">16:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_2_8\">16:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_3_8\">16:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_4_8\">16:00</button></td>\n" +
        "                            </tr>\n" +
        "                            <tr>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_0_9\">17:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_1_9\">17:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_2_9\">17:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_3_9\">17:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_4_9\">17:00</button></td>\n" +
        "                            </tr>\n" +
        "                            <tr>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_0_10\">18:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_1_10\">18:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_2_10\">18:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_3_10\">18:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_4_10\">18:00</button></td>\n" +
        "                            </tr>\n" +
        "                            <tr>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_0_11\">19:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_1_11\">19:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_2_11\">19:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_3_11\">19:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_4_11\">19:00</button></td>\n" +
        "                            </tr>\n" +
        "                            <tr>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_0_12\">20:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_1_12\">20:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_2_12\">20:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_3_12\">20:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_4_12\">20:00</button></td>\n" +
        "                            </tr>\n" +
        "                            <tr>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_0_13\">21:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_1_13\">21:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_2_13\">21:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_3_13\">21:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_4_13\">21:00</button></td>\n" +
        "                            </tr>\n" +
        "                            <tr>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_0_14\">22:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_1_14\">22:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_2_14\">22:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_3_14\">22:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_4_14\">22:00</button></td>\n" +
        "                            </tr>\n" +
        "                            <tr>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_0_15\">23:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_1_15\">23:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_2_15\">23:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_3_15\">23:00</button></td>\n" +
        "                                <td><button class=\"table-btn-noselect\" id=\"date_4_15\">23:00</button></td>\n" +
        "                            </tr>\n" +
        "                        </table>\n" +
        "                    </div>\n" +
        "                </div>\n" +
        "            </div>\n" +
        "        </div>\n" +
        "    </div>"
    states[2] =
        "<link rel=\"stylesheet\" href=\"../css/bookingstate2.css\">" +
        "        <!-- 以下为表单信息 -->\n" +
        "        <div class=\"left\">\n" +
        "            <div>\n" +
        "                <form>\n" +
        "                    <div class=\"form-row\">\n" +
        "                        <div>\n" +
        "                            <label class=\"form-bottom\">真实姓名:</label>\n" +
        "                            <input type=\"text\" class=\"form-control form-bottom input-sty\" id=\"real_name\">\n" +
        "                        </div>\n" +
        "                        <div>\n" +
        "                            <label class=\"form-bottom\">联系电话:</label>\n" +
        "                            <input type=\"text\" class=\"form-control form-bottom input-sty\" id=\"contact\">\n" +
        "                        </div>\n" +
        "                    </div>\n" +
        "                    <div class=\"form-group\">\n" +
        "                        <label class=\"form-bottom\">日期:</label>\n" +
        "                        <select onchange=\"state2_dateChanger(null)\" id=\"Date\" class=\"form-control form-bottom input-sty\">\n" +
        "                            <option selected>2月24日</option>\n" +
        "                            <option>2月25日</option>\n" +
        "                        </select>\n" +
        "                        <label class=\"form-bottom\">预约时间:</label>\n" +
        "                        <label class=\"form-bottom\" id=\"Time\">\n" +
        "                            19:00-20:00\n" +
        "                        </label>\n" +
        "                    </div>\n" +
        "                    <div class=\"form-group\">\n" +
        "                        <label class=\"form-bottom\">会议室用途:</label>\n" +
        "                        <input type=\"text\" class=\"form-control form-bottom input-sty\" id=\"purpose\">\n" +
        "                    </div>\n" +
        "                    <div class=\"form-group\">\n" +
        "                        <label class=\"form-bottom\">参与人数:</label>\n" +
        "                        <input type=\"text\" class=\"form-control form-bottom input-sty\" id=\"participants\">\n" +
        "                    </div>\n" +
        "                    <div class=\"form-group\">\n" +
        "                        <label class=\"form-bottom\">申请人备注：</label>\n" +
        "                        <div class=\"div-text\">\n" +
        "                            <textarea id=\"comment\" rows=\"5\" cols=\"20\" class=\"textarea1 input-sty\"></textarea>\n" +
        "                        </div>\n" +
        "                    </div>\n" +
        "                </form>\n" +
        "            </div>\n" +
        "        </div>\n" +
        "        <!-- 以下为时间表 -->\n" +
        "        <div class=\"right\">\n" +
        "            <table class=\"table-sty\">\n" +
        "                <thead>\n" +
        "                <tr>\n" +
        "                    <th id=\"date_0\">2月20日</th>\n" +
        "                </tr>\n" +
        "                </thead>\n" +
        "                <tr>\n" +
        "                    <td><button class=\"table-btn-noselect\" id=\"date_0_0\">8:00</button></td>\n" +
        "                </tr>\n" +
        "                <tr>\n" +
        "                    <td><button class=\"table-btn-noselect\" id=\"date_0_1\">9:00</button></td>\n" +
        "                </tr>\n" +
        "                <tr>\n" +
        "                    <td><button class=\"table-btn-noselect\" id=\"date_0_2\">10:00</button></td>\n" +
        "                </tr>\n" +
        "                <tr>\n" +
        "                    <td><button class=\"table-btn-noselect\" id=\"date_0_3\">11:00</button></td>\n" +
        "                </tr>\n" +
        "                <tr>\n" +
        "                    <td><button class=\"table-btn-noselect\" id=\"date_0_4\">12:00</button></td>\n" +
        "                </tr>\n" +
        "                <tr>\n" +
        "                    <td><button class=\"table-btn-noselect\" id=\"date_0_5\">13:00</button></td>\n" +
        "                </tr>\n" +
        "                <tr>\n" +
        "                    <td><button class=\"table-btn-noselect\" id=\"date_0_6\">14:00</button></td>\n" +
        "                </tr>\n" +
        "                <tr>\n" +
        "                    <td><button class=\"table-btn-noselect\" id=\"date_0_7\">15:00</button></td>\n" +
        "                </tr>\n" +
        "                <tr>\n" +
        "                    <td><button class=\"table-btn-noselect\" id=\"date_0_8\">16:00</button></td>\n" +
        "                </tr>\n" +
        "                <tr>\n" +
        "                    <td><button class=\"table-btn-noselect\" id=\"date_0_9\">17:00</button></td>\n" +
        "                </tr>\n" +
        "                <tr>\n" +
        "                    <td><button class=\"table-btn-noselect\" id=\"date_0_10\">18:00</button></td>\n" +
        "                </tr>\n" +
        "                <tr>\n" +
        "                    <td><button class=\"table-btn-noselect\" id=\"date_0_11\">19:00</button></td>\n" +
        "                </tr>\n" +
        "                <tr>\n" +
        "                    <td><button class=\"table-btn-noselect\" id=\"date_0_12\">20:00</button></td>\n" +
        "                </tr>\n" +
        "                <tr>\n" +
        "                    <td><button class=\"table-btn-noselect\" id=\"date_0_13\">21:00</button></td>\n" +
        "                </tr>\n" +
        "                <tr>\n" +
        "                    <td><button class=\"table-btn-noselect\" id=\"date_0_14\">22:00</button></td>\n" +
        "                </tr>\n" +
        "                <tr>\n" +
        "                    <td><button class=\"table-btn-noselect\" id=\"date_0_15\">23:00</button></td>\n" +
        "                </tr>\n" +
        "            </table>\n" +
        "        </div>"
});


/*

$.ajax({
    url: //请求的地址,
    data: //传递给后台的数据,
    method: //请求方法(get,post),
    async: //是否异步(同步:必须等待后台返回数据后程序才会继续往下走，异步:发送后不管是否成功都可以继续往下走),
    beforeSend: //发送到后台前执行的函数，可以用作校验或给按钮添加样式，如果用作校验return false;则可以取消本次请求,
    contentType: //默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型,
    dataType://"json"(指定服务器返回的数据类型),
    success: function(data) {
        //请求成功的函数，data是后台返回的数据，在这里对数据进行操作
    },
    error: function(err) {
        //请求失败，err是失败的内容
    },
    complete: function(e) {
        //不管成功还是失败都会调用这个函数
    }
})

 */